<!DOCTYPE html>
<html>
  <head>
    <link rel="shortcut icon" href="bootstrap/favicon.png" type="image/png" />
    <title>FTC Ranks</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>

  <style>
  
  @font-face
  {
    font-family: starcraft;
    src: url('bootstrap/fonts/starcraft.ttf');
  }
   @font-face
  {
    font-family: resist;
    src: url('bootstrap/fonts/CGF-Locust-Resistance.ttf');
  }
  th, #teamName {
    cursor: pointer;
  }
  h1, h2, h3{
    font-family: resist;/*starcraft;*/
    color:rgba(51, 255, 0, 0.47);
    letter-spacing: 1px;
  }
  mark{
    background-color: rgba(228, 228, 228, 0.82);
  }
  mark.blue{
    background-color: rgba(132, 172, 255, 0.82);
  }
  mark.red{
    background-color: rgba(255, 139, 139, 0.82);
  }
  #qwikNum {
    width: 82px;
    text-align: center;
  }
/*  thead{
    position: fixed;
  }*/
  </style>

  <body style="background-color:#101010;">
  <img id="qwhiteTop" src="white.jpg"/>
  <nav id="topnav" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div id="topNavHead" class="navbar-header">
      <h1>de.evolution</h1>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div id="qwickHolder" style="float:right;" class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <form class="navbar-form navbar-left form-inline" role="form">
        <div class="form-group col-lg-2 row">
          <input style="color:#7A0000;" id="qwikR1" maxlength="4" type="text" class="form-control" placeholder="Red 1">
          <input style="color:#071241;" id="qwikB1" maxlength="4" type="text" class="form-control" placeholder="Blue1">
        </div>
        <div class="form-group col-lg-2 row">
          <input style="color:#7A0000;" id="qwikR2" maxlength="4" type="text" class="form-control" placeholder="Red 2">
          <input style="color:#071241;" id="qwikB2" maxlength="4" type="text" class="form-control" placeholder="Blue 2">
        </div>
        <div class="form-group col-lg-2 row">
          <input style="color:#7A0000;" id="qwikRs" maxlength="3" type="text" class="form-control" placeholder="Red Score">
          <input style="color:#071241;" id="qwikBs" maxlength="3" type="text" class="form-control" placeholder="Blue Score">
        </div>
        <div id="stackPen" class="form-group col-lg-2 row">
          <input style="color:#7A0000;" id="qwikRp" maxlength="3" type="text" class="form-control" placeholder="Red Penalties">
          <input style="color:#071241;" id="qwikBp" maxlength="3" type="text" class="form-control" placeholder="Blue Penalties">
        </div>
        <div id="stackPen" class="form-group col-lg-2 row">
           <button id="qwickBtn" type="button" class="form-control btn btn-default">Enter</button>
           <button id="qwickBtnClear" type="reset" class="form-control btn btn-default">Clear</button>
        </div>
        <div class="form-group col-lg-1 row">
          <input style="color:#000;" id="qwikNum" maxlength="3" type="text" class="form-control" placeholder="Match #">
        </div>
      </form>
    </div><!-- /.navbar-collapse -->
  </nav>

  <div class="tab-content">
    <div class="tab-pane fade in active" id="sorted">
      <div class="panel panel-default">

     <!-- Table -->
    <div id="respTeam" class="table-responsive">
    <table id="teamSortList" class="table table-striped tablesorter">
      <thead>
        <tr>
          <th>#</th>
          <th>Name</th>
          <th>PowRank</th>
          <th>QP</th>
          <th>RP</th>
          <th>Average Score</th>
          <th>Win Rate</th>
          <th >Strategy</th>
        </tr>
      </thead>
      <tbody>
        <tr style="visibility:hidden;display:none;" id="entryHide">
          <td id="teamNumber"></td> 
          <td id="teamName"><b></b></td>
          <td id="pow"></td>
          <td id="qp"></td>
          <td id="rp"></td>
          <td id="avsc"></td>
          <td id="winrate"></td>
          <td id="strategy">
                <div class="input-group ">
                  <div class="input-group-addon">Defensive: <input type="checkbox" id="defense"></input></div>
                  <div class="input-group-addon">Offensive: <input type="checkbox" id="offense"></input></div>
                  <div class="input-group-addon">Block-Scoring: <input type="checkbox" id="blocks"></input></div>
                  <div class="input-group-addon">Hanging: <input type="checkbox" id="hang"></input></div>
                  <div class="input-group-addon">Flag-Spinner: <input type="checkbox" id="flagspin"></input></div>
                </div>
          </td>
          <td style="visibility:hidden;display:none;" id="notes"></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
    </div>
    <div class="tab-pane fade" id="matches">
      <div class="panel panel-default">
     <!-- Table -->
        <div id="respMatch" class="table-responsive">
        <table id="matchSortList" class="table table-striped tablesorter">
          <thead>
            <tr>
              <th>#</th>
              <th>Blue 1</th>
              <th>Blue 2</th>
              <th>Red 1</th>
              <th>Red 2</th>
              <th>Blue Score</th>
              <th>Red Score</th>
              <th>Blue Penalty</th>
              <th>Red Penalty</th>
            </tr>
          </thead>
          <tbody>
            <tr style="visibility:hidden;display:none;" id="entryHide">
              <td id="matchNumber"></td>
              <td id="blue1Num"><b></b></td>
              <td id="blue2Num"></td>
              <td id="red1Num"></td>
              <td id="red2Num"></td>
              <td id="bscore"></td>
              <td id="rscore"></td>
              <td id="bpen"></td>
              <td id="rpen"></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    </div>
  </div>
<nav id="bottomnav" class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">4278</a>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav nav-pills">
      <li class="active erlm"><a data-toggle="tab" href="#sorted">Teams</a></li>
      <li class="erlm"><a data-toggle="tab" href="#matches">Matches</a></li>
    </ul>
    <form class="navbar-form navbar-left" role="search">
      <div class="form-group">
        <input id="teamSearch" type="text" class="form-control" placeholder="Team #"/>
      </div>
      <!-- <button type="submit" class="btn btn-default">Find</button> -->
    </form>
   <ul class="nav navbar-nav navbar-right">
    </ul>
  </div><!-- /.navbar-collapse -->
</nav>

<img id="qwhite" src="white.jpg"/>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="jquery/jquery-2.0.3.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <link href="bootstrap/css/bootstrap-dialog.css" rel="stylesheet" type="text/css" />
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="bootstrap/js/tab.js"></script>
    <script src="bootstrap/js/bootstrap-dialog.js"></script>
    <script type="text/javascript" src="jquery/jquery.tablesorter.min.js"></script> 

    <!-- Useful Functions -->
    <script>
      function makeid(how, letter)
        {
            var text = "";
            var possible = (letter? "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789":"0123456789");

            for( var i=0; i < how; i++ )
                text += possible.charAt(Math.floor(Math.random() * possible.length));

            return text;
        }

      function populateTeams(teamMap){
          for(var i=0;i<teamMap.length;i++){
            if(i==0) $("#teamSortList tr").not("thead tr").remove();
            var tableEntry = '<tr id="'+teamMap[i].TeamNumber+'"> \
            <td id="teamNumber">'+teamMap[i].TeamNumber+'</td> \
            <td id="teamName"><b>'+teamMap[i].TeamName+'</b></td> \
            <td id="pow">'+teamMap[i].PowRank+'</td> \
            <td id="qp">'+teamMap[i].QP+'</td> \
            <td id="rp">'+teamMap[i].RP+'</td> \
            <td id="avsc">'+teamMap[i].AvgScore+'</td> \
            <td id="winrate">'+teamMap[i].WinRate+'%</td> \
            <td id="strategy"> \
                  <div class="input-group "> \
                    <div  id="defense" class="input-group-addon">Defensive: <input '+(teamMap[i].Strategy[0]?'checked':'')+' type="checkbox"></input></div> \
                    <div id="offense" class="input-group-addon">Offensive: <input '+(teamMap[i].Strategy[1]?'checked':'')+' type="checkbox"></input></div> \
                    <div id="block" class="input-group-addon">Block-Scoring: <input '+(teamMap[i].Strategy[2]?'checked':'')+' type="checkbox"></input></div> \
                    <div id="hang" class="input-group-addon">Hanging: <input '+(teamMap[i].Strategy[3]?'checked':'')+' type="checkbox"></input></div> \
                    <div id="flagSpin"class="input-group-addon">Flag-Spinner: <input '+(teamMap[i].Strategy[4]?'checked':'')+' type="checkbox"></input></div>\
                  </div> \
            </td> \
            <td style="visibility:hidden;display:none;" id="notes">'+teamMap[i].Notes+'</td> \
          </tr>';
          $('table#teamSortList > tbody').append(tableEntry);
        }

        var save = $('#respTeam').html();
          $('table#teamSortList').remove();
          $('#respTeam').append(save);
      var thColor = $('#teamName b').css('color');
      $('#teamName b').hover(function(e){
        $(this).css('color', '#84C4FF').html('<u>'+$(this).text()+'</u>');
      }, function(e){
        $(this).css('color', thColor).html($(this).text());
      });
           $("table#teamSortList").tablesorter(); 
                   $('#teamName b').click(function() { var tN = $(this).parent().siblings("#teamNumber").text(); var n = $(this).parent().siblings("#notes"); BootstrapDialog.show({
            message: '',
            buttons: [{label: 'Close',
                action: function(dialogItself){
                  var note = $('textarea#inputz').val();
                  var name = $('input#namez').val();
                  $.post('/?type=notes&num='+tN+'&data='+note);
                    dialogItself.close();
                  $(function () {
                    $('#namez').val(name);
                  });
                  $.post('/?type=tname&num='+tN+'&data='+name, function(data, w, s) {
                    populateTeams(data)
                  });
                } 
            }]
        }, $(this).parent().siblings("#notes").text(), $(this).text());});
          $('tr div.input-group-addon input').click(function(e){
            var send = '/?type=team&strat='+$(this).parent().attr('id')+'&num='+$(this).parent().parent().parent().parent().attr('id')+'&data='+($(this).prop('checked')?"1":"0");
              //console.log(send);
            $.post(send);
          });
      }

      function populateMatches(matchMap) {
          for(var i=0;i<matchMap.length;i++){
            if(i==0) $("#matchSortList tr").not("thead tr").remove();
        var matchTableEntry = '<tr style="" id="match'+i+'"> \
              <td id="matchNumber">'+(i+1)+'</td> \
              <td id="blue1Num">'+matchMap[i].TeamNums[2]+'</td> \
              <td id="blue2Num">'+matchMap[i].TeamNums[3]+'</td> \
              <td id="red1Num">'+matchMap[i].TeamNums[0]+'</td> \
              <td id="red2Num">'+matchMap[i].TeamNums[1]+'</td> \
              <td id="bscore">'+matchMap[i].BScore+'</td> \
              <td id="rscore">'+matchMap[i].RScore+'</td> \
              <td id="bpen">'+matchMap[i].BPen+'</td> \
              <td id="rpen">'+matchMap[i].RPen+'</td> \
            </tr>';

        $('table#matchSortList > tbody').append(matchTableEntry);
      }       
       var save = $('#respMatch').html();
          $('table#matchSortList').remove();
          $('#respMatch').append(save);

     var thColor = $('#teamName b').css('color');
      $('#teamName b').hover(function(e){
        $(this).css('color', '#84C4FF').html('<u>'+$(this).text()+'</u>');
      }, function(e){
        $(this).css('color', thColor).html($(this).text());
      });
      
           $("table#matchSortList").tablesorter(); 
        }

      function levelBars(e, f){
          $(e).css('opacity', '0.0');
          if($(e).height() != $(f).height()){
              $(e).height($(f).height());
          }
        }
      function serveRecalc(){
        $.get('/?type=recalc', function(data, other, thors) {
          populateTeams(data)
        });
      }
    </script>

    <!-- Event Functions -->
    <script>
      $(document).ready(function(e) { 
        $.get('/?type=team&num=all', function(data, other, thors) {
          populateTeams(data)
        });
        $.get('/?type=match', function(data, other, thors) {
          populateMatches(data)
        });
        $('#qwikNum').val(1);
        $.get('/?type=matchNum', function(data) {
          $('#qwikNum').val(1+data);
        });

        //$(".tablesorter").tablesorter(); 
       // $("#matchSortList").tablesorter(); 

          $('*').click(function(e){
            while(($('#qwickHolder').width() + $('#topNavHead').width()) > $('#topnav').width()){
            $('#qwickHolder').width($('#qwickHolder').width()-1);
          }

          levelBars("#qwhite","#bottomnav")
          levelBars("#qwhiteTop", '#topnav')
        });
        $('*').scroll(function(e){
        levelBars("#qwhite","#bottomnav")
        levelBars("#qwhiteTop", '#topnav')
      });
        window.setTimeout(function(){
          while($('#qwickHolder').width() + $('#topNavHead').width() >= $('#topnav').width()){
           $('#qwickHolder').width($('#qwickHolder').width()-1);
           //console.log("done")
          }
	levelBars("#qwhite","#bottomnav")
        levelBars("#qwhiteTop", '#topnav')
        }, 500);
        levelBars("#qwhite","#bottomnav")
        levelBars("#qwhiteTop", '#topnav')

        while($('#qwickHolder').width() + $('#topNavHead').width() >= $('#topnav').width()){
          $('#qwickHolder').width($('#qwickHolder').width()-1)
        }
      }); 


      var thColor = $('th').css('color');
      $('th').hover(function(e){
        $(this).css('color', '#84C4FF').html('<u>'+$(this).text()+'</u>');
      }, function(e){
        $(this).css('color', thColor).html($(this).text());
      });

      $("*").load(function(e){
          while($('#qwickHolder').width() + $('#topNavHead').width() >= $('#topnav').width()){
          $('#qwickHolder').width($('#qwickHolder').width()-1)
        }

        $("#topNavHead").click();
      });
    </script>

    <!-- Tab initialize -->
    <script type="text/javascript">
      $('.erlm a').click(function (e) {
        e.preventDefault();
        $(this).tab('show');  
      });
    </script>

    <!-- New Table Entries -->
    <script>
      // for(var i=0;i<15;i++){
      //     var tableEntry = '<tr id="'+makeid(9,true)+'"> \
      //     <td id="teamNumber">'+makeid(4,false)+'</td> \
      //     <td id="teamName"><b>'+makeid(9,true)+'</b></td> \
      //     <td id="pow">'+makeid(2,false)+'</td> \
      //     <td id="qp">'+makeid(2,false)+'</td> \
      //     <td id="rp">'+makeid(2,false)+'</td> \
      //     <td id="avsc">'+makeid(2,false)+'</td> \
      //     <td id="winrate">'+makeid(2,false)+'%</td> \
      //     <td id="strategy"> \
      //           <div class="input-group "> \
      //             <div class="input-group-addon">Defensive: <input type="checkbox" id="defense"></input></div> \
      //             <div class="input-group-addon">Offensive: <input type="checkbox" id="offense"></input></div> \
      //             <div class="input-group-addon">Block-Scoring: <input type="checkbox" id="blocks"></input></div> \
      //             <div class="input-group-addon">Hanging: <input type="checkbox" id="hang"></input></div> \
      //             <div class="input-group-addon">Flag-Spinner: <input type="checkbox" id="flagspin"></input></div> \
      //           </div> \
      //     </td> \
      //   </tr>';

      //   $('table#teamSortList > tbody').append(tableEntry);
      // }  
    </script>
      <script>
      var lMatch

    function getData() {
      var sendMatch = {"TeamNums":[parseInt($('#qwikR1').val()),parseInt($('#qwikR2').val()),parseInt($('#qwikB1').val()),parseInt($('#qwikB2').val())],"RScore":parseInt($('#qwikRs').val()),"BScore":parseInt($('#qwikBs').val()),"RPen":parseInt($('#qwikRp').val()),"BPen":parseInt($('#qwikBp').val())}
      lMatch = $.post('/?type=match&num='+parseInt($('#qwikNum').val())+'&data='+ JSON.stringify(sendMatch), function(data, other, thors) {
        populateTeams(data)
      });
    }
    $('#qwickBtn').click(function(e){
      getData();
      $('#qwikNum').val(parseInt($('#qwikNum').val())+1)
      $.get('/?type=match', function(data, w, s){
        populateMatches(data);
      });
      $("#qwickBtnClear").click();
    });  

    $("#teamSearch").on('keyup',function(event) {
      if($(this).val() == ""){
        $('table#teamSortList tbody tr').not('#entryHide').each(function(index) {
           $(this).show();
        });
        $('table#matchSortList tbody tr').not('#entryHide').each(function(index) {
          $(this).children('#blue1Num,#blue1Num mark').html($(this).children('#blue1Num,#blue1Num mark').text())
          $(this).children('#blue2Num').html($(this).children('#blue2Num').text())
          $(this).children('#red1Num').html($(this).children('#red1Num').text())
          $(this).children('#red2Num').html($(this).children('#red2Num').text())
          $(this).children('#rscore').html($(this).children('#rscore').text())
          $(this).children('#bscore').html($(this).children('#bscore').text())
           $(this).show();
        });
      } 
      else if($(this).val().indexOf("!") == 0){
         $('table#teamSortList tbody tr').each(function(i) {
          //console.log($(this).find('#teamName b').text().toLowerCase());console.log($('#teamSearch').val().toLowerCase().substr(1));console.log('\n');
          $(this).find('#teamName b').text().toLowerCase().indexOf($('#teamSearch').val().toLowerCase().substr(1)) == 0? $(this).show():$(this).hide();
         });
      }
      else if($(this).val().indexOf(".") == 0){
        //console.log("Found Period...")
        var em = $(this).val();
        //var strat[] = [false, false, false, false, false];
         $('table#teamSortList tbody tr').not('#entryHide').each(function(index) {
            var sho = false;// var curr = $(this);//var how = 0; var many = 0
            var strag = [false,false,false,false,false]; //d,o,h,f,b
            var selec = ["#defense", "#offense", "#hang", "#flagSpin", "#block"];
           // console.log($(this).find('#defense').children().prop("checked"));
            if (em.indexOf('.d') != -1) {strag[0] = true;}
            if (em.indexOf('.o') != -1) {strag[1] = true;}
            if (em.indexOf('.h') != -1) {strag[2] = true;}
            if (em.indexOf('.f') != -1) {strag[3] = true;}
            if (em.indexOf('.b') != -1) {strag[4] = true;}

            // if (strag[0] != -1 && $(this).find('#defense').children().prop("checked")) {strag[0] = false;sho = true;};
            // if (strag[1] != -1 && $(this).find('#offense').children().prop("checked")) {strag[1] = false;sho = true;};
            // if (strag[2] != -1 && $(this).find('#hang').children().prop("checked")) {strag[2] = false;sho = true;};
            // if (strag[3] != -1 && $(this).find('#flagSpin').children().prop("checked")) {strag[3] = false;sho = true;};
            // if (strag[4] != -1 && $(this).find('#block').children().prop("checked")) {strag[4] = false;sho = true;};
            //1100
            //1010
            //top & bot == top
            //console.log(strag);
            for (var i = strag.length - 1; i >= 0; i--) {
              if((strag[i] == $(this).find((selec[i]+"")).children().prop("checked") && strag[i]) == strag[i]){
                sho = true;
              } else{
                sho = false;break;
              }
            }
            sho?$(this).show():$(this).hide()
         });
        }
      else {
      $('table#teamSortList tbody tr').not('#entryHide').each(function(i) {
        $(this).children('#teamNumber').text().indexOf($('#teamSearch').val()) == 0? $(this).show():$(this).hide()
      });
      $('table#matchSortList tbody tr').not('#entryHide').each(function(i) {
        var yeah = false;
        if($(this).children('#blue1Num,#blue1Num mark').text().indexOf($('#teamSearch').val()) == 0){
          $(this).children('#blue1Num,#blue1Num mark').html('<mark class="blue">'+$(this).children('#blue1Num,#blue1Num mark').text()+'</mark>')
          $(this).show();
          $(this).children('#bscore').html('<mark class="blue">'+$(this).children('#bscore').text()+'</mark>')
         // console.log( $(this).children('#bscore').html());console.log( $(this).children('#bscore').text());
          yeah = true;
        } else{
         // console.log( $(this).children('#bscore').html());console.log( $(this).children('#bscore').text());
          $(this).children('#blue1Num,#blue1Num mark').html($(this).children('#blue1Num,#blue1Num mark').text())
          $(this).children('#bscore').html($(this).children('#bscore').text())
         // console.log( $(this).children('#bscore').html());console.log( $(this).children('#bscore').text());
        } if($(this).children('#blue2Num').text().indexOf($('#teamSearch').val()) == 0){
          $(this).children('#blue2Num').html('<mark class="blue">'+$(this).children('#blue2Num').text()+'</mark>')
          $(this).show();
          $(this).children('#bscore').html('<mark class="blue">'+$(this).children('#bscore').text()+'</mark>')
          yeah = true;
        } else{
            $(this).children('#blue2Num').html($(this).children('#blue2Num').text())
            $(this).children('#bscore').html($(this).children('#bscore').text())
        } if($(this).children('#red1Num').text().indexOf($('#teamSearch').val()) == 0){
          $(this).children('#red1Num').html('<mark class="red">'+$(this).children('#red1Num').text()+'</mark>')
          $(this).show();
          $(this).children('#rscore').html('<mark class="red">'+$(this).children('#rscore').text()+'</mark>')
          yeah = true;
        } else{
          $(this).children('#red1Num').html($(this).children('#red1Num').text())
          $(this).children('#rscore').html($(this).children('#rscore').text())
        } if($(this).children('#red2Num').text().indexOf($('#teamSearch').val()) == 0){
          $(this).children('#red2Num').html('<mark class="red">'+$(this).children('#red2Num').text()+'</mark>')
          $(this).show();
          $(this).children('#rscore').html('<mark class="red">'+$(this).children('#rscore').text()+'</mark>')
          yeah = true;
        } else{
          $(this).children('#red2Num').html($(this).children('#red2Num').text())
          if(yeah){$(this).show()}else{$(this).hide();
          $(this).children('#rscore').html($(this).children('#rscore').text());$(this).children('#bscore').html($(this).children('#bscore').text());
        }
        }
      });
      }
    });
  </script>
  </body>
</html>
